<template>
    <div class="role-management-page">
        <!-- 工具栏 -->
        <div class="toolbar">
            <el-row>
                <el-col :xs="24" :sm="12" :md="8">
                    <el-input v-model="searchQuery" placeholder="请输入角色名称搜索" clearable class="search-input">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-col>

                <el-col :xs="24" :sm="12" :md="16" class="actions">
                    <el-button type="primary" @click="handleCreateRole">创建角色</el-button>
                </el-col>
            </el-row>
        </div>

        <!-- 表格展示角色 -->
        <el-table :data="paginatedRoles" border stripe style="width: 100%">
            <el-table-column label="角色名称" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作" align="center" width="200">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="filteredRoles.length" background
            layout="prev, pager, next, total" @current-change="handlePageChange" />

        <!-- 弹窗 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
            <el-form :model="currentRole" label-width="100px">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="currentRole.name" placeholder="请输入角色名称" />
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="currentRole.description" placeholder="请输入角色描述" />
                </el-form-item>
                <el-form-item label="权限">
                    <el-checkbox-group v-model="currentRole.permissions">
                        <el-checkbox v-for="permission in allPermissions" :key="permission" :label="permission">
                            {{ permission }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSaveRole">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
import { ElCheckboxGroup, ElCheckbox } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

// 搜索和分页相关
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(10);

// 当前角色和弹窗相关
const dialogVisible = ref(false);
const dialogTitle = ref('');
const currentRole = ref({
    id: null,
    name: '',
    description: '',
    permissions: [],
});

// 全部权限列表
const allPermissions = ref([
    '查看用户',
    '编辑用户',
    '删除用户',
    '查看角色',
    '编辑角色',
    '删除角色',
    '管理系统设置',
]);

// 角色数据
const roles = ref([]);

const fetchRoleListData = () => {
    //模拟角色列表数据请求
    const data = [
        { id: 1, name: '管理员', description: '全权限用户', permissions: ['查看用户', '编辑用户', '删除用户', '管理系统设置'] },
        { id: 2, name: '普通用户', description: '只能查看和编辑自己的资料', permissions: ['查看用户'] },
    ]
    roles.value = data;
}

// 过滤后的角色列表
const filteredRoles = computed(() => {
    const query = searchQuery.value.trim().toLowerCase();
    return roles.value.filter(
        role =>
            role.name.toLowerCase().includes(query) || role.description.toLowerCase().includes(query)
    );
});

// 分页数据
const paginatedRoles = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredRoles.value.slice(start, end);
});

// 创建角色
const handleCreateRole = () => {
    dialogTitle.value = '创建角色';
    dialogVisible.value = true;
    currentRole.value = {
        id: null,
        name: '',
        description: '',
        permissions: [],
    };
};

// 编辑角色
const handleEdit = role => {
    dialogTitle.value = '编辑角色';
    dialogVisible.value = true;
    currentRole.value = { ...role };
};

// 保存角色
const handleSaveRole = () => {
    if (!currentRole.value.name || !currentRole.value.description) {
        alert('请填写完整信息');
        return;
    }

    if (currentRole.value.id) {
        // 编辑角色
        const index = roles.value.findIndex(role => role.id === currentRole.value.id);
        if (index !== -1) {
            roles.value[index] = { ...currentRole.value };
        }
        //模拟修改角色请求
    } else {
        // 新增角色
        currentRole.value.id = Date.now(); // 使用时间戳作为角色 ID
        roles.value.push({ ...currentRole.value });
        //模拟添加角色请求
    }
    dialogVisible.value = false;
};

// 删除角色
const handleDelete = role => {
    roles.value = roles.value.filter(r => r.id !== role.id);
    //模拟删除角色请求
};

// 分页切换
const handlePageChange = page => {
    currentPage.value = page;
};

onMounted(() => {
    fetchRoleListData();
});
</script>

<style scoped>
.role-management-page {
    padding: 20px;
}

.toolbar {
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
}

.actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.el-table {
    margin-bottom: 20px;
}

.dialog-footer {
    text-align: right;
}
</style>
